<template>
  <transition name="modal">
    <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
      <div class="modal-content" @click.stop>
        <div class="page" :class="{ shazam: isMenuOpen }">
          <!-- 左上角触发按钮 -->
          <span class="menu_toggle" @click="toggleMenu">
            <i class="menu_open">&#9776;</i>
          </span>

          <!-- 搜索框 -->
          <div class="search-container" :class="{ 'search-visible': isMenuOpen }">
            <div class="search">
              <h3>Click on search icon, then type your keyword.</h3>
              <div>
                <input type="text" placeholder="Search . . ." required>
              </div>
            </div>
          </div>

          <!-- 菜单选项 -->
          <ul class="menu_items">
            <li>
              <a href="#" 
                 @click.prevent="selectOption('genes')" 
                 :class="{ active: activeOption === 'genes' }">
                 Genes
              </a>
            </li>
            <li>
              <a href="#" 
                 @click.prevent="selectOption('pro')" 
                 :class="{ active: activeOption === 'pro' }">
                 Pro
              </a>
            </li>
            <li>
              <a href="#" 
                 @click.prevent="selectOption('ori')" 
                 :class="{ active: activeOption === 'ori' }">
                 Ori
              </a>
            </li>
          </ul>

          <!-- 主要内容区域 -->
          <div class="content">
            <div class="content_inner">
              <h1>Search Methods Introduction</h1>
              
              <div class="search-intro">
                <div class="search-method">
                  <h2>Search by Genes</h2>
                  <p>Search through our comprehensive genetic database by specific gene names or identifiers. This method allows you to explore genetic variations, mutations, and their associations with hereditary hearing loss.</p>
                  <ul>
                    <li>Direct gene name search</li>
                    <li>Multiple gene comparison</li>
                    <li>Genetic variation analysis</li>
                  </ul>
                </div>

                <div class="search-method">
                  <h2>Search by Proteins</h2>
                  <p>Explore protein-related data including protein structures, interactions, and their roles in hearing mechanisms. This search method helps understand protein functions and their impact on hearing loss.</p>
                  <ul>
                    <li>Protein structure information</li>
                    <li>Protein-protein interactions</li>
                    <li>Functional analysis</li>
                  </ul>
                </div>

                <div class="search-method">
                  <h2>Search by Origins</h2>
                  <p>Investigate hearing loss patterns based on geographical and ethnic origins. This method provides insights into population-specific genetic variations and their correlation with hearing impairment.</p>
                  <ul>
                    <li>Geographic distribution</li>
                    <li>Population statistics</li>
                    <li>Ethnic-specific variants</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'SearchModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isMenuOpen: false,
      activeOption: null
    }
  },
  methods: {
    closeModal () {
      this.$emit('close')
    },
    handleOverlayClick (event) {
      if (event.target.classList.contains('modal-overlay')) {
        this.closeModal()
      }
    },
    toggleMenu () {
      this.isMenuOpen = !this.isMenuOpen
    },
    selectOption (option) {
      this.activeOption = option
      console.log('Selected option:', option)
      // 这里可以处理选项选择逻辑
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 80%;
  height: 75vh;
  max-width: 1200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.page {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.content {
  height: 200%;
  transform-origin: top left;
  transition: transform 0.7s cubic-bezier(1.000, 0.005, 0.240, 1.000);
  background-color: #f0f0f0;
}

.content_inner {
  height: 50%;
  overflow-y: auto;
  padding: 40px 60px;
}

.menu_toggle {
  z-index: 900;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  cursor: pointer;
  width: 100px;
  height: 80px;
  background-color: #ff9e60;
  border-bottom-right-radius: 100%;
}

.menu_toggle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-style: normal;
}

.menu_items {
  position: absolute;
  bottom: 0;
  left: 50px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu_items li {
  height: 60px;
  margin-bottom: 30px;
  transform: translateX(-300px);
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.menu_items li:nth-child(2) {
  margin-left: 40px;
}

.menu_items li:nth-child(3) {
  margin-left: 80px;
}

.menu_items a {
  text-decoration: none;
  color: #584E4A;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 添加悬停效果 */
.menu_items a:hover {
  background-color: rgba(255, 158, 96, 0.1);
  color: #ff9e60;
}

/* 添加激活状态样式 */
.menu_items a.active {
  background-color: rgba(255, 158, 96, 0.2);
  color: #ff9e60;
}

/* 可选：添加点击效果 */
.menu_items a:active {
  transform: scale(0.98);
}

/* 菜单打开状态 */
.shazam .content {
  transform: rotate(-30deg) translateX(5%) translateY(-2%);
}

.shazam .menu_items li {
  transform: translateX(0);
  transition-delay: 0.45s;
}

.shazam .menu_items li:nth-child(2) {
  transition-delay: 0.47s;
}

.shazam .menu_items li:nth-child(3) {
  transition-delay: 0.48s;
}

/* 修改模态框动画 */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(0.98);
}

.modal-enter-to,
.modal-leave-from {
  opacity: 1;
  transform: scale(1);
}

/* 优化模态框本身的过渡 */
.modal-content {
  transform-origin: center center;
}

/* 添加新的样式 */
h1 {
  color: #333;
  margin-bottom: 30px;
  font-size: 2em;
  text-align: center;
}

.search-intro {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.search-method {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-method h2 {
  color: #ff9e60;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.search-method p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.search-method ul {
  list-style-type: none;
  padding: 0;
}

.search-method ul li {
  color: #777;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.search-method ul li:before {
  content: "•";
  color: #ff9e60;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* 修改搜索框相关样式 */
.search-container {
  position: absolute;
  bottom: 80px;
  right: 120px;
  opacity: 0;
  transform: rotate(0deg) translateX(100px);
  transition: all 0.7s cubic-bezier(1.000, 0.005, 0.240, 1.000);
  z-index: 900;
}

.shazam .search-container {
  opacity: 1;
  transform: rotate(0deg) translateX(0);
}

.search {
  margin: 20px;
}

.search h3 {
  color: #584E4A;
  margin-bottom: 15px;
  font-weight: normal;
}

/* 搜索框容器样式 */
.search > div {
  display: inline-block;
  position: relative;
}

/* 修改搜索图标样式，确保与圆框对齐 */
.search > div:after {
  content: "";
  background: #ff9e60;
  width: 3px; /* 稍微调细一点 */
  height: 15px; /* 调短一点 */
  position: absolute;
  top: 25px; /* 调整位置 */
  right: 0px; /* 调整位置 */
  transform: rotate(-45deg);
  border-radius: 2px;
}


/* 搜索框样式 */
.search > div > input {
  color: #584E4A;
  font-size: 16px;
  background: transparent;
  width: 35px;
  height: 35px;
  padding: 10px;
  border: solid 3px #ff9e60;
  outline: none;
  border-radius: 35px;
  transition: all 0.5s;
  cursor: pointer;
  position: relative;
}

/* 占位符文本样式 */
.search > div > input::placeholder {
  color: #999;
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* 聚焦时显示占位符 */
.search > div > input:focus::placeholder {
  opacity: 1;
}

/* 搜索框展开效果 */
.search > div > input:focus,
.search > div > input:not(:placeholder-shown) {
  width: 250px;
}

/* 确保搜索框在展开时搜索图标保持正确位置 */
.search > div > input:focus + div:after,
.search > div > input:not(:placeholder-shown) + div:after {
  right: 5px;
}

/* 搜索框容器在可见状态下的样式 */
.search-visible {
  opacity: 1 !important;
  pointer-events: auto;
}
</style>
